<template>
  <view class="order-detail">
    <custom-nav-bar title="订单详情" showBack></custom-nav-bar>
    <view class="order-header">
      <text class="order-title">等待支付</text>
      <text class="order-time">支付剩余时间 13:00</text>
      <view class="order-status">
        <view class="order-cancel btn">取消订单</view>
        <view class="order-pay btn">立即支付</view>
      </view>
    </view>

    <order></order>
  </view>
</template>

<script setup>
import { ref } from 'vue'

</script>
<style scoped lang="scss">
.order-detail {
  min-height: 100vh;
  background-color: #F5F5F5;
  padding: 0 24rpx;
  display: flex;
  flex-direction: column;
  gap: 24rpx;




  .order-header {
    border-radius: 30rpx;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    gap: 24rpx;
    justify-content: center;
    align-items: center;

    .order-title {
      font-size: 40rpx;
      font-weight: bold;
      margin-top: 30rpx;
      // padding: 30rpx;
    }

    .order-time {
      color: #999;
      font-size: 30rpx;
    }

    .order-status {
      // padding: 30rpx;
      margin-bottom: 30rpx;
      display: flex;
      // justify-content: ;
      flex-direction: row;
      gap: 30rpx;

      .btn {
        padding: 20rpx 36rpx;
        // border: 1px solid red;
        border-radius: 14rpx;
        font-weight: bold;

      }

      .order-cancel {
        border: 1rpx solid #d8d8d8;
      }

      .order-pay {
        color: #fff;
        background-color: #E74747;
      }
    }

  }
}
</style>
<style></style>
